﻿<div role="tabpanel">
  <!-- 页签导航 -->
  <ul class="nav nav-tabs " role="tablist">
    <li role="presentation" class="active">
      <a href="#userPanel" aria-controls="actPanel" role="tab" data-toggle="tab">列表</a>
    </li>
    <li role="presentation">
      <a href="#detailPanel" aria-controls="detailPanel" role="tab" data-toggle="tab">详情</a>
    </li>
    <!-- <li role="presentation">
      <a href="#addActPanel" aria-controls="addActPanel" role="tab" data-toggle="tab">新增</a>
    </li> -->
  </ul>

  <!-- 页签面板-->
  <div class="tab-content">
<!-- 用户信息 -->
<div role="tabpanel" class="tab-pane active" id="userPanel">
<div class="panel panel-default">
  <div class="panel-body">
     <div class="row">
          <div class="col-lg-6">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Search for...">
              <span class="input-group-btn">
                <button class="btn btn-primary" type="button">搜 索</button>
              </span>
            </div>
          </div>
        </div>
    <table class="table table-striped">
      <thead>
        <tr>
          <th class="col-md-1">#</th>
          <th class="col-md-1">标题</th>
          <th class="col-md-1">日期</th>
          <th class="col-md-1">地点</th>
          <th class="col-md-1">人数</th>
          <th class="col-md-2">花费</th>
          <th class="col-md-2">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td><a href="#">户外远足</a></td>
          <td>2015-07-03</td>
          <td>北京市房山区</td>
          <td>58</td>
          <td>15800</td>
          <td>
            <a href="" data-toggle="modal" data-target="#editUser"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑</a>
            <a href="" data-toggle="modal" data-target=".bs-example-modal-sm"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>
          </td>
        </tr>
        <tr>
          <td>2</td>
          <td><a href="#">郊野露宿</a></td>
          <td>2015-07-03</td>
          <td>北京市通州区</td>
          <td>58</td>
          <td>15800</td>
          <td>
            <a href="" data-toggle="modal" data-target="#editUser"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑</a>
            <a href="" data-toggle="modal" data-target=".bs-example-modal-sm"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>
          </td>
        </tr>
        <tr>
          <td>3</td>
          <td><a href="#">户外漂流</a></td>
          <td>2015-07-03</td>
          <td>北京市密云区</td>
          <td>58</td>
          <td>15800</td>
          <td>
            <a href="" data-toggle="modal" data-target="#editUser"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑</a>
            <a href="" data-toggle="modal" data-target=".bs-example-modal-sm"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>
          </td>
        </tr>

      </tbody>
    </table>
  </div>
</div>
<!-- end -->
<!-- 分页导航 -->
<nav class="col-md-4 col-md-offset-4">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>
</div>
<!-- end -->
<!-- 用户详情 -->
<div role="tabpanel" class="tab-pane" id="detailPanel">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="media">
        <div class="media-left">
          <a href="#">
            <img class="media-object img-circle" src="images/size.png" alt="头像">
          </a>
        </div>
        <div class="media-body">
          <h1 class="media-heading">户外活动标题</h1>
          <br/>
          <p>标题：<span>漂流</span></p>
          <p>日期：<span>2015-07-03</span></p>
          <p>地点：<span>房山密云</span></p>
          <p>人数：<span>12</span></p>
          <p>花费：<span>2300</span></p>
          <p>经度：<span></span>89</p>
          <p>纬度：<span></span>134</p>
          <p>发起人：<span>发起人</span></p>
          <p>课程：<span>漂流逃生</span></p>
          <p>细节：<span>活动介绍活动介绍活动介绍活动介绍</span></p>
          <div class="rows">
            <button type="button" class="btn btn-success">通过</button>

            <button type="button" class="btn btn-danger">拒绝</button>
           </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- end -->
<!-- 新增用户 -->
<div role="tabpanel" class="tab-pane" id="addActPanel">
     <div class="panel panel-default">
         <div class="panel-body">
				      <form class="form-horizontal" action="" method="post">

              <div class="form-group">
              <label class="col-md-2 control-label" for="activityName">活动标题:</label>
					    <div class="col-md-8">

						  <input type="text" id="activityName" class="form-control">
					    </div>
				      </div>

				      <div class="form-group">
              <label class="col-md-2 control-label" for="activityDate">活动日期:</label>
					    <div class="col-md-8">

						  <input type="date" id="activityDate" class="form-control">
					    </div>
				      </div>

              <div class="form-group">
              <label class="col-md-2 control-label" for="activityPeoNum">活动人数:</label>
              <div class="col-md-8">
              <input type="number" id="activityPeoNum" class="form-control">
              </div>
              </div>

              <div class="form-group">
              <label class="col-md-2 control-label" for="activityPlace">活动地点:</label>
              <div class="col-md-8">
              <input type="text" id="activityPlace" class="form-control">
              </div>
              </div>

            <div class="form-group">
            <label class="col-md-2 control-label" for="longitude">地点经度:</label>
              <div class="col-md-8">

                <input type="text" id="longitude" class="form-control">
              </div>
            </div>

            <div class="form-group">
            <label class="col-md-2 control-label" for="latitude">地点纬度:</label>
              <div class="col-md-8">

                <input type="text" id="latitude" class="form-control">
              </div>
            </div>

            <div class="form-group">
            <label for="activityCost" class="col-md-2 control-label">活动花费:</label>
              <div class="col-md-8">
                <input type="text" id="activityCost" class="form-control">
              </div>
            </div>

            <div class="form-group">
            <label for="initiator" class="col-md-2 control-label">发起人:</label>
              <div class="col-md-8">
              <input type="text" id="initiator" class="form-control">
              </div>
            </div>

             <div class="form-group">
                <label for="courseNO" class="col-md-2 control-label">课程名称:</label>
                <div class="col-md-8">
                  <select id="courseNO" class="form-control">
                    <option>==请选择==</option>
                    <option>11100111-4455-6677-8899-AABBCCDDEEFF</option>
                    <option>11100222-4455-6677-8899-AABBCCDDEEFF</option>
                    <option>11100333-4455-6677-8899-AABBCCDDEEFF</option>
                  </select>
                </div>
              </div>

              <div class="form-group">
                <label class="col-md-2 control-label" for="picture">活动图片:</label>
                <div class="col-md-8">
                  <input type="file" id="picture">
                </div>
               </div>

              <div class="form-group">
              <label for="activityDesc" class="col-md-2 control-label">活动细节:</label>
                <div class="col-md-8">
                <textarea id="activityDesc" class="form-control" rows="3"></textarea>
                </div>
              </div>

              <div class="form-group">
              <div class="col-md-8 col-md-offset-2">
               <button type="submit" class="btn btn-primary">确  认</button>
               <button type="reset" class="btn btn-primary">重  置</button>
              </div>
              </div>

	  </form>
	</div>
 </div>
 </div>
</div><!-- /tab-content-->

<!-- 删除用户的Modal界面 -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">
                    删除活动
        </h4>
      </div>
      <div class="modal-body">
                确认删除该记录？
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">
                    确 认
        </button>
        <button type="button" class="btn btn-primary" data-dismiss="modal">
                     取 消
        </button>
      </div>
    </div>
  </div>
</div>
<!-- 删除活动end -->

<!-- 修改活动的Modal界面 -->
<div class="modal fade" id="editUser" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header" align="center">
        <h4 class="modal-title" id="myModalLabel">
          <strong>编 辑 活 动</strong>
        </h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" action="" method="post">

              <div class="form-group">
              <label class="col-md-2 control-label" for="activityName">活动标题:</label>
					    <div class="col-md-8">

						  <input type="text" id="activityName" class="form-control">
					    </div>
				      </div>

				      <div class="form-group">
              <label class="col-md-2 control-label" for="activityDate">活动日期:</label>
					    <div class="col-md-8">

						  <input type="date" id="activityDate" class="form-control">
					    </div>
				      </div>

              <div class="form-group">
              <label class="col-md-2 control-label" for="activityPeoNum">活动人数:</label>
              <div class="col-md-8">
              <input type="number" id="activityPeoNum" class="form-control">
              </div>
              </div>

              <div class="form-group">
              <label class="col-md-2 control-label" for="activityPlace">活动地点:</label>
              <div class="col-md-8">
              <input type="text" id="activityPlace" class="form-control">
              </div>
              </div>

            <div class="form-group">
            <label class="col-md-2 control-label" for="longitude">地点经度:</label>
              <div class="col-md-8">

                <input type="text" id="longitude" class="form-control">
              </div>
            </div>

            <div class="form-group">
            <label class="col-md-2 control-label" for="latitude">地点纬度:</label>
              <div class="col-md-8">

                <input type="text" id="latitude" class="form-control">
              </div>
            </div>

            <div class="form-group">
            <label for="activityCost" class="col-md-2 control-label">活动花费:</label>
              <div class="col-md-8">
                <input type="text" id="activityCost" class="form-control">
              </div>
            </div>

            <div class="form-group">
            <label for="initiator" class="col-md-2 control-label">发起人:</label>
              <div class="col-md-8">
              <input type="text" id="initiator" class="form-control">
              </div>
            </div>

             <div class="form-group">
                <label for="courseNO" class="col-md-2 control-label">课程名称:</label>
                <div class="col-md-8">
                  <select id="courseNO" class="form-control">
                    <option>==请选择==</option>
                    <option>11100111-4455-6677-8899-AABBCCDDEEFF</option>
                    <option>11100222-4455-6677-8899-AABBCCDDEEFF</option>
                    <option>11100333-4455-6677-8899-AABBCCDDEEFF</option>
                  </select>
                </div>
              </div>

              <div class="form-group">
                <label class="col-md-2 control-label" for="picture">活动图片:</label>
                <div class="col-md-8">
                  <input type="file" id="picture">
                </div>
               </div>

              <div class="form-group">
              <label for="activityDesc" class="col-md-2 control-label">活动细节:</label>
                <div class="col-md-8">
                <textarea id="activityDesc" class="form-control" rows="3"></textarea>
                </div>
              </div>

              <div class="form-group">
              <div class="col-md-8 col-md-offset-2">
               <button type="submit" class="btn btn-primary">确  认</button>

              <button type="reset" class="btn btn-primary" data-dismiss="modal">取 消</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<!-- end -->